<template>
  <div class="video-container">
    <div :class="{'show': isShow}" class="video-aside-bar">
      <div class="inner">
        <a class="item" @click="showMenu">
          <i class="fa fa-navicon"></i>
          <span class="text-tip">章节</span>
        </a>
      </div>
      <div class="expand chapter-expand text-l">
        <div class="expand-inner">
          <div class="chapter-scrollbar scroll">
            <dl v-for="(item, index) in video_list" :key="index" class="chapter-mini-list">
              <dt class="tit">{{ item.chapter }}</dt>
              <dd v-for="(item2, index2) in item.list" :key="index2">
                <a :href="item2.url">
                  <span class="list-type">
                    <i class="fa fa-caret-right"></i>
                  </span>
                  <span class="text-ellipsis">
                    {{ item2.title }}
                  </span>
                </a>
              </dd>
            </dl>
          </div>
        </div>
      </div>
    </div>
    <qdvideo-player :url="url"></qdvideo-player>
  </div>
</template>

<script>
  import QdvideoPlayer from './qdvideo-player'

  export default {
    data() {
      return {
        isShow: false,
        url: '',
        video_list: [
          {
            chapter: "准备", 
            list:[
              {title: '演示：公众号支付', url: '/videos/11011'},
              {title: '准备项目', url: '/videos/11012'}
            ]
          },
          {
            chapter: '授权', 
            list:[
              {
                title: '配置网页授权目录与支付授权目录', 
                url: '/videos/11021'
              }, 
              {
                title: 'OpenID 与 UnionID', 
                url: '/videos/11022'
              },
              {
                title: '微信网页授权：获取 code 值', 
                url: '/videos/11023'
              },
              {
                title: '微信网页授权：获取 access_token，得到用户的 openid', 
                url: '/videos/11024'
              }
            ]
          },
          {
            chapter: '公众号支付', 
            list:[
              {
                title: '公众号支付：统一下单', 
                url: '/videos/11031'
              }, 
              {
                title: 'JSAPI：准备参数与支付', 
                url: '/videos/11032'
              }
            ]
          }
        ]
      }
    },
    methods: {
      showMenu() {
        this.isShow = !this.isShow
      }
    },
    created() {
      this.url = 'http://avatar.wpn.itlukai.com/' + this.$route.params.id + '.mp4'
    },
    components: {
      QdvideoPlayer
    },
  }
</script>

<style lang="less" @scoped>
  .video-container {
    position: relative;
  }
  .video-aside-bar {
    transition: right 0.3s ease;
    text-align: left;
    position: absolute;
    right: -340px;
    top: 0;
    height: 100%;
    background-color: #1d1d21;
    z-index: 1000;
    .inner {
      box-sizing: border-box;
      position: absolute;
      left: -40px;
      top: 50%;
      margin-top: -25px;
      width: 40px;
      height: 50px;
      background-color: #1d1d21;
      z-index: 1000;
      .item {
        text-align: center;
        position: relative;
        display: block;
        height: 50px;
        padding-top: 8px;
        box-sizing: border-box;
        cursor: pointer;
        i {
          position: relative;
          display: block;
          text-align: center;
          color: #808792;
          font-size: 18px;
          background-color: #1d1d21;
          z-index: 2;
        }
        .text-tip {
          font-size: 12px;
          color: #c8cdd2;
        }
        &:hover i,
        &:hover .text-tip {
          color: #fff;
        }
      }
    }

    .chapter-expand {
      position: relative;
      height: 100%;
      z-index: 999;
      width: 340px;
      background-color: #25282c;
      .expand-inner {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        padding: 28px 0 10px;
        .scroll {
          position: relative;
          height: 100%;
          padding: 0 20px;
          overflow-y: hidden;
        }
        .chapter-mini-list {
          position: relative;
          margin-top: -20px;
          margin-bottom: 20px;
          .tit {
            height: 54px;
            line-height: 54px;
            font-size: 14px;
            color: #b5b9bc;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          dd {
            padding-left: 10px;
            height: 30px;
            line-height: 30px;
            a {
              position: relative;
              display: block;
              padding: 0 74px 0 24px;
              font-size: 12px;
              color: #787d82;
              .list-type {
                position: absolute;
                left: 0;
                top: 1px;
                font-size: 16px;
              }
              &:hover {
                color: #fff;
              }
            }
          }
        }
      }
    }
    &.show {
      right: 0;
    }
  }

</style>